<template>
<div>

<el-header>添加预约信息</el-header>
  <el-tabs :tab-position="tabPosition" style="height: 550px;margin-top: 50px;">
    <el-tab-pane label="用户管理">

  <el-row :gutter="20">
  <el-col :span="2"><div >姓名:</div></el-col>
  <el-col :span="6"><el-input/></el-col>
  <el-col :span="16"></el-col>
</el-row>

<el-row :gutter="20">
  <el-col :span="2"><div>身份证:</div></el-col>
  <el-col :span="6"><el-input/></el-col>
  <el-col :span="16"></el-col>
</el-row>

<el-row :gutter="20">
  <el-col :span="4"><div class="block">
     <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>
  </div> </el-col>
  <el-col :span="6"><div class="grid-content "></div></el-col>
  <el-col :span="14">姓名：<el-input /></el-col>

</el-row>

<el-row :gutter="20">
  <el-col :span="12">性别:<el-input /></el-col>
  <el-col :span="12">年龄:<el-input /></el-col>
</el-row>

<el-row :gutter="20">
  <el-col >身份证:<el-input /></el-col>
</el-row>

<el-row :gutter="20">
  <el-col >手机:<el-input /></el-col>
</el-row>

<el-row :gutter="20">
  <el-col >出生日期:<el-input /></el-col>

</el-row>
    </el-tab-pane>
    <el-tab-pane label="配置管理">

      <el-transfer
    filterable
    :filter-method="filterMethod"
    filter-placeholder="请输入城市拼音"
    v-model="value2"
    :data="data2">
  </el-transfer>

    </el-tab-pane>
  </el-tabs>

</div>
</template>



<script>
  export default {
    data() {
       const generateData2 = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
            pinyin: pinyin[index]
          });
        });
        return data;
      };

      return {
        data2: generateData2(),
        value2: [],
        filterMethod(query, item) {
          return item.pinyin.indexOf(query) > -1;
        },
        
        tabPosition: 'left',
        value1:""
      };
    }
  };
</script>


<style>

 .el-row {
    margin-bottom: 20px;

  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-header{

    text-align: center;
    line-height: 60px;
  }

  .el-aside {

    text-align: center;
    line-height: 300px;
  }

  .el-main {

    text-align: center;
    line-height: 25px;
  }

  body > .el-container {
    margin-bottom: 20px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
